<template>
  <div style="width:calc(100% - 230px);padding:10px">
    <div class="menu">
        <div :class="{active:activeMenu===1?true:false}" @click="chooseMenu(1)">全部</div>
        <div :class="{active:activeMenu===2?true:false}" @click="chooseMenu(2)">未认证</div>
        <div :class="{active:activeMenu===3?true:false}" @click="chooseMenu(3)">已认证</div>
    </div>
    <div>
        <AuthenticListVue
            :dataList="authenticList.list" 
            @refresh="handlerRefresh"
            v-if="activeMenu===1?true:false"></AuthenticListVue>
        <AuthenticListVue 
            :dataList="authenticList.isAuthentic"
            @refresh="handlerRefresh"
            v-if="activeMenu===3?true:false"></AuthenticListVue>
        <AuthenticListVue 
            :dataList="authenticList.noAuthentic"
            @refresh="handlerRefresh"
            v-if="activeMenu===2?true:false"></AuthenticListVue>
    </div>
  </div>
</template>

<script>
import request from '@/util/request';
import AuthenticListVue from '../../components/server/AuthenticList.vue';

export default {
    data(){
        return {
            authenticList:{},
            activeMenu:1
        }
    },
    components:{
        AuthenticListVue
    },
    methods:{
        getAuthenticList(){
             request.get('/admin/authentic/list').then((res) => {
                console.log('--->',res.data);
                this.authenticLis=[]
                this.authenticList = res.data
            })
            .catch(err =>{
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                } 
            })
        },
        chooseMenu(menu){
            this.activeMenu = menu
        },
        handlerRefresh(){
            this.getAuthenticList()
        }
    },
    mounted(){
        this.getAuthenticList()
    }
}
</script>

<style lang="scss" scoped>
.menu{
    width:100%;
    display:flex;
    margin-bottom: 10px;
    margin-left: 10px;
    & > div{
        padding: 10px;
        width: 100px;
        text-align: center;
        &:hover{
            color: #0080ff;
            cursor: pointer;
        }
    }

}

.active{
    color: #0080ff;
    border-bottom: 2px #0080ff solid;
}
</style>